<template>
  <div class="app-container">
    <div class="mb-20">
      <el-button class="btn-active" @click="goAdd" icon="el-icon-plus" size="mini">新增场景</el-button>
      <el-button class="btn-active" @click="$router.push('/scene/ProcessDesign')" icon="el-icon-plus" size="mini">流程设计</el-button>
      <!-- <el-button class="btn-active"  icon="el-icon-plus" size="mini">生成模板</el-button> -->
      <el-button class="btn-delete" icon="el-icon-delete"  @click="deleteRow" size="mini">删除</el-button>
    </div>
    <div class="search">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="">
          <el-select v-model="form.testStatus" placeholder="测试状态">
            <el-option label="未执行" value="0"></el-option>
            <el-option label="已执行" value="1"></el-option>
            <el-option label="执行中" value="2"></el-option>
            <el-option label="执行异常" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" >
          <el-date-picker
            v-model="form.createTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" >
          <el-input placeholder="创建人员" v-model="form.createUserName" />
        </el-form-item>
        <el-form-item label="" >
          <el-input placeholder="场景名称" v-model="form.sceneName" />
        </el-form-item>
        <el-form-item label="" >
          <el-button size="mini" @click="search" icon="el-icon-search">查询</el-button>
          <el-button size="mini" @click="search(1)" icon="el-icon-refresh-right">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="加载中"
      :data="list"
      @selection-change="handleSelectionChange"
      border
      fit
      highlight-current-row
    >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="场景名称" width="160">
        <template slot-scope="scope">
          {{ scope.row.sceneName }}
        </template>
      </el-table-column>
      <el-table-column label="场景描述"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sceneDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="测试开始时间" width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.testStartTime }}
        </template>
      </el-table-column>
      <el-table-column label="测试结束时间" width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.sceneEndTime }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="测试状态" width="110" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.testStatus == 0" class="green-tag">未执行</span>
          <span v-if="scope.row.testStatus == 1" class="other-tag">已执行</span>
          <span v-if="scope.row.testStatus == 2" class="other-tag">执行中</span>
          <span v-if="scope.row.testStatus == 3" class="red-tag">执行异常</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.createUserName }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="220">
          <template slot-scope="scope">
            <el-button class="detail" @click="createTeml(scope.row)" icon="el-icon-edit-outline">生成模板</el-button>
            <el-button class="detail" @click="goEdit(scope.row)" icon="el-icon-edit-outline">编辑</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getSceneList } from '@/api/table'
import { createTmpl, removeScene, downLoadTmplFile } from '@/api/form'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      form: {
      },
      currentPage: 1,
        pageNum: 10,
        total: 0,
        multipleSelection: []
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      goEdit(row) {
        this.$router.push({path: '/scene/mag/add', query: {id: row.sceneId}})
      },
      download(row) {
        downLoadTmplFile({tmplId: row.tmplId}).then(res => {
          console.log(res)
        })
      },
      search(num) {
        if (num==1) {
          this.form = {}
        }
        this.currentPage = 1
        this.fetchData()
      },
      deleteRow() {
        console.log(this.multipleSelection.map(item => item.sceneId).join(','))
        removeScene({ ids: this.multipleSelection.map(item => item.sceneId).join(',')}).then(res => {
          console.log(res)
          this.fetchData()
        })
      },
      createTeml(row) {
        createTmpl({sceneId: row.sceneId }).then(res => {
          console.log(res)
          this.$message.success('操作成功')
          // this.$router.go(-1)
          this.fetchData()
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    handleSizeChange(val) {
        this.pageNum = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
    goAdd() {
      this.$router.push('/scene/mag/add')
    },
    fetchData() {
      this.listLoading = true
      getSceneList({pageSize:this.pageNum,
          pageNum: this.currentPage,
          ...this.form
            }).then(res => {
        this.list = res.rows
        this.total = res.total
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep { .el-form-item__label {
  color: white;
}
}


</style>